<template>
    <view class="item-option-list" v-if="popupShow" @click="onPopup">
        <view class="item-option-content" @click.stop v-if="!upShow">
            <view class="option-content-top" v-if="!isAdmin&&!isOwners">
                <text >狠心关进小黑屋</text>
            </view>
			<view class="option-content-top circle-admin" v-if="isAdmin">
			    <text >圈主管理</text>
			</view>
			<view class="option-content-top" v-if="isOwners&&!isAdmin">
			    <text >是否删除贴文</text>
			</view>
			
            <view class="option-content-bottom" v-if="!isAdmin&&!isOwners">
                <!-- <button @click="unlike">屏蔽该用户</button> -->
                <button @click="unlike(0)" class="buttonP">色情低俗</button>
                <button @click="unlike(1)">恶心恐怖</button>
                <button @click="unlike(2)">广告软文</button>
				<button @click="unlike(3)">低质水贴</button>
            </view>
			<view class="option-content-bottom" v-if="isAdmin">
				<button @click="blockUser">禁言</button>
                <button  @click="circleAdminDelArticle">删帖</button>
                <button class="up" @click="AdminUpArticle">置顶</button>
			  <!--  <button @click="unlike(0)">色情低俗</button>
			    <button @click="unlike(1)">恶心恐怖</button>
			    <button @click="unlike(2)">广告软文</button>
			    <button @click="unlike(3)">低质水贴</button> -->
			</view>
			<view class="option-content-bottom" v-if="isOwners&&!isAdmin">
				<button @click="circleAdminDelArticle" class="buttonP">删帖</button>
				<button @click="popupShow=false">容我考虑一下</button>
			</view>
        </view>
        <view class="upArticle-content" v-if="upShow" @click.stop>
            <view class="content-title">请设置置顶帖子标题</view>
            <view class="content-input">
                <input type="text" placeholder="输入标题" v-model="upArticleTitle"/>
            </view>
            <view class="content-btn" @click.stop="setArticleOnTop">确定</view>
            <view class="content-off" @click.stop="upShow=false">
                <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/delXX-black.png" />
            </view>
            <view class="content-logo">
                <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/popup-logo.png" />
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "dislike",
        props:{
            fatherValue:{
                required: true
            },
            articleItem:{
                required: true
            },
			isAdmin:{//区分普通用户还是管理员按钮
                required: true,
				default:false,
				type:Boolean
			},
			isOwners:{//判断是否时用户本身的帖子
                required: true,
				default:false,
				type:Boolean
			},
        },
		watch:{
			isOwners(nval){
				console.log(nval,123456)
			}
		},
        data(){
            return{
                popupShow: this.fatherValue,
                articleItems: this.articleItem,
                upShow: false,
                upArticleTitle:'',
            }
        },
        mounted(){
          // console.log(this.articleItem)
            // console.log(this.isOwner,this.isAdmin)
        },
        methods:{
            //点击置顶弹出标题窗口
            AdminUpArticle(){
                this.upShow = true
            },
            //置顶帖子
            async setArticleOnTop(){
                let params = {
                    title: this.upArticleTitle,
                    article_id: this.articleItem.data.id,
                    user_token:uni.getStorageSync('userToken')
                }
                const res = await this.$api.setArticleOnTop(params)
                if (res.data.level == 'success'){
                    this.popupShow = false;
                }
                uni.showToast({
                    icon:'none',
                    title:res.data.message
                })
            },
            //点击不感兴趣
            async unlike(){
                this.popupShow = false;
                this.$parent.delPostItem(this.articleItems.index);
				console.log(this.articleItems)
				let params={
					circle_id:this.articleItems.data.circle_id,
					user_id:this.articleItems.data.user_id,
					user_token:uni.getStorageSync('userToken')
				}
				
				let res=await this.$api.userReport(params);
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
            },
			async blockUser(){
				//屏蔽用户
				let params={
					circle_id:this.articleItems.data.circle_id,
					user_id:this.articleItems.data.user_id,
					user_token:uni.getStorageSync('userToken')
				}
				this.$parent.delPostItem(this.articleItems.index);
				let res=await this.$api.blockUser(params)
				this.popupShow = false;
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
			},
			circleAdminDelArticle(){
				//管理员删帖
				
				let _this=this
				uni.showModal({
					title:'删除帖子？',
					success: function (res) {
						if (res.confirm) {
							_this.circleAdminDelArticleHandle()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete(){
						console.log('完成')
					}
				})
			},
			async circleAdminDelArticleHandle(){
				let params={
					id:this.articleItems.data.id,
					user_token:uni.getStorageSync('userToken')
				}
				let res=await this.$api.circleAdminDelArticle(params);
				
				if(res.data.level=='success'){
					this.popupShow = false;
					this.$parent.delPostItem(this.articleItems.index);
				}
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
				
			},
			deleteArticle(){
				//用户本身删帖
				
				let _this=this
				uni.showModal({
					title:'删除帖子？',
					success: function (res) {
						if (res.confirm) {
							_this.deleteArticleHandle()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete(){
						console.log('完成')
					}
				})
			},
			async deleteArticleHandle(){
				let params={
					article_id:this.articleItems.data.article_id,
					user_token:uni.getStorageSync('userToken')
				}
				let res=await this.$api.deleteArticle(params);
				
				if(res.data.level=='success'){
					this.popupShow = false;
					this.$parent.delPostItem(this.articleItems.index);
				}
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
				
			},
			
            //单击显隐删除帖子弹窗
            onPopup(){
                if (this.popupShow){
                    this.popupShow = false;
                } else {
                    this.popupShow = true;
                }
            },
        },
        watch:{
            popupShow(newValue, oldValue){
                this.$emit('update:fatherValue',newValue)
            },
            fatherValue(newValue){
                this.popupShow = newValue
            },
            articleItem(newValue){
                this.articleItems = newValue
            },
        }
    }
</script>

<style scoped lang="scss">
    .del{
        background: red;
        color: #FFFFFF;
    }
    .up{
        background: #FFE226;
    }
    .upArticle-content{
        width: calc(100vw - 320rpx);
        display: flex;
        position: relative;
        flex-direction: column;
        padding: 80rpx 70rpx;
        background: #FFFFFF;
        border-radius: 24rpx;
        .content-title{
            font-size: 32rpx;
            width: 100%;
            text-align: center;
            padding-top: 50rpx;
            padding-bottom: 76rpx;
            font-weight: bolder;
            overflow: hidden;
        }
        .content-input{
            width: 100%;
            height: 88rpx;
            padding-bottom: 60rpx;
            input{
                width: calc(100% - 40rpx);
                height: 100%;
                padding: 0 20rpx;
                line-height: 88rpx;
                background: #F7F7F7;
                font-size: 28rpx;
            }
        }
        .content-btn{
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            background: #FFE226;
            border-radius: 16rpx;
            color: #000000;
            font-weight: bold;
            font-size: 28rpx;
        }
        .content-off{
            position: absolute;
            top: 18rpx;
            left: 14rpx;
            width: 52rpx;
            height: 52rpx;
        }
        .content-logo{
            position: absolute;
            width: 232rpx;
            height: 232rpx;
            top: -172rpx;
            left: calc(50vw - 206rpx);
        }
    }
	.circle-admin{
		
		text{
			margin-top: 20rpx;
			font-size: 30rpx;
		}
	}
</style>